<template>
  <el-card class="box-card">
    <div class="wrapper">
      <h2>{{ count }}</h2>
      <div class="left">
        <slot name="left"></slot>
      </div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
});
const width = ref(null);

onMounted(() => {
    width.value = props.width;
});
</script>

<style scoped>
* {
  /* border: 1px solid red; */
}
.wrapper {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.left {
  display: flex;
  align-items: center;
  padding: 10px;
}
.right {
  display: flex;
  flex: 2;
  align-items: center;
  justify-content: center;
}
.box-card {
  width: v-bind(width);
}
</style>